<template>
	<div>
		<div
			v-if="props.inputFlag == null || props.inputFlag"
			style="position: absolute; z-index: 100; top: 50%; left: 0px"
		>
			<Icon type="md-arrow-dropright" size="20" @click="prevOpen" />
		</div>

		<div
			v-if="props.topFlag == null || props.topFlag"
			class="topShowBase"
			style="position: absolute; z-index: 100; top: 0px; left: 50%"
		>
			<Icon type="md-arrow-dropdown" size="20" @click="topOpen" />
		</div>

		<div
			v-if="props.outputFlag == null || props.outputFlag"
			style="position: absolute; z-index: 100; top: 50%; left: 100%"
		>
			<Icon type="md-arrow-dropleft" size="20" @click="afterOpen" />
		</div>

		<Drawer
			title="输入"
			placement="left"
			:width="50"
			:z-index="9999"
			:closable="true"
			draggable
			:mask="false"
			:transfer="false"
			v-model="prevFlag"
		>
			<ParamDefine
				:params="prevInputDefine"
				:isViewBasicFieldFlag="true"
				:isViewArrayFlag="true"
				:isAddColumnFlag="false"
				:isActionColumnFlag="false"
				:isUpdateColumnFlag="false"
				:jsonEditorFlag="false"
				:isRemoveColumnFlag="false"
				:isAddChildrenColumnFlag="false"
				:isMappingColumnFlag="false"
				ref="left"
			>
			</ParamDefine>
		</Drawer>

		<Drawer
			title="输入json"
			placement="top"
			:width="50"
			:z-index="9999"
			:closable="true"
			draggable
			:transfer="false"
			v-model="topFlag"
		>
			<div class="jsoneditor" ref="jsonEditor" style="width: 100%; height: 600px"></div>
		</Drawer>

		<Drawer
			title="输出"
			placement="right"
			:width="50"
			:z-index="9999"
			:closable="true"
			draggable
			:mask="false"
			:transfer="false"
			v-model="afterFlag"
		>
			<ParamDefine
				:params="afterInputDefine"
				:isViewBasicFieldFlag="true"
				:isViewArrayFlag="true"
				:isAddColumnFlag="false"
				:isActionColumnFlag="false"
				:isUpdateColumnFlag="false"
				:jsonEditorFlag="false"
				:isRemoveColumnFlag="false"
				:isAddChildrenColumnFlag="false"
				:isMappingColumnFlag="false"
				ref="right"
			>
			</ParamDefine>
		</Drawer>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance, defineExpose } from 'vue'
import { Message, Radio, Row, Switch } from 'view-ui-plus'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import ParamDefine from '@/views/restapi/ParamDefine.vue'
import JsonEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.min.css'
import { parseDefineToJson } from '@/utils'

const prevFlag = ref(false)
const afterFlag = ref(false)
const topFlag = ref(false)

const je = ref()
const jsonEditor = ref()
const props = defineProps(['versionId', 'stepCode', 'resource', 'topFlag', 'getResource', 'outputFlag', 'inputFlag'])

const prevInputDefine = ref({
	params: [],
	basicTypeFlag: false,
	isArrayFlag: false,
	isActionColumnFlag: false,
	isMappingColumnFlag: false
})

const afterInputDefine = ref({
	params: [],
	basicTypeFlag: false,
	isArrayFlag: false,
	isActionColumnFlag: false,
	isMappingColumnFlag: false
})

const left = ref()

const prevOpen = async () => {
	prevFlag.value = true
	queryInput()
}

const getParams = () => {
	if (je.value) {
		return je.value.get()
	}

	return {}
}

defineExpose({
	getParams
})

const topOpen = () => {
	topFlag.value = true
	if (!je.value) {
		initJsonEditor()
	}
}

const initJsonEditor = async () => {
	const options = {
		modes: ['code', 'tree', 'form', 'text', 'preview'],
		mode: 'code'
	}
	je.value = new JsonEditor(jsonEditor.value, options)
	// const initJson = {};
	// editor.value.set(initJson);
	je.value.set({})
	await queryInput()

	const cb = parseDefineToJson(prevInputDefine.value)

	je.value.set(cb)
}

const queryInput = async () => {
	const c = await getInputDefine()
	const cb = left.value.repairJson(c)
	prevInputDefine.value = cb
}
const getInputDefine = async () => {
	const versionId = props.versionId
	let resource = props.resource
	if (props.getResource) {
		resource = props.getResource()
	}
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: versionId,
		frontFile: resource,
		stepCode: props.stepCode
	})
	return read
}

const queryOutput = async () => {
	const c = await getOutputDefine()
	const cb = left.value.repairJson(c)
	afterInputDefine.value = cb
}

const getOutputDefine = async () => {
	const versionId = props.versionId
	let resource = props.resource
	if (props.getResource) {
		resource = props.getResource()
	}
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentOutputDefine({
		id: versionId,
		frontFile: resource,
		stepCode: props.stepCode
	})
	return read
}

const afterOpen = async () => {
	afterFlag.value = true
	queryOutput()
}
</script>
<style scoped></style>
